<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6" v-if="router!='/appTask/index'">
        <div class="border">
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="任务" name="1">
              <ul class="taskUl">
                <li :class="activeClass == index ? 'active' : ''" v-for="(item,index) in taskDefList" :key="index"
                    @click="getItem(index)" style="margin:1% 6%">
                  <a>
                    <el-link :underline="false" type="primary" @click="selectTask(item)">
                      {{ item.taskName }}({{ item.taskCode }})
                    </el-link>
                  </a>
                </li>
              </ul>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-col>
      <el-col :span="router=='/appTask/index'? 24 : 18 ">
        <el-tabs v-model="tabActiveName" @tab-click="handleClick" type="border-card">
          <div class="func_area" :style="{height:areaHeight}">
            <div style="display: flex">
              <el-radio-group v-model="checked_select" size="mini" :disabled="isChangeTack" @change="relyon">
                筛选：
<!--                <el-radio-button v-if="tabActiveName === 'first'" label="单层上游依赖"></el-radio-button>-->
                <el-radio-button v-if="tabActiveName === 'second'" label="所有上游依赖"></el-radio-button>
<!--                <el-radio-button v-if="tabActiveName === 'first'" label="单层下游依赖"></el-radio-button>-->
                <el-radio-button v-if="tabActiveName === 'second'" label="所有下游依赖"></el-radio-button>
              </el-radio-group>
              <img v-if="tabActiveName=='second'" @click="doExportByJofDef" class="down" style="margin: 0 10px 0 30px;"
                   src="../../../assets/images/updown.png" alt="">
              <el-popover v-if="tabActiveName=='second' && router!='/appJobDef/index'" placement="bottom"
                          trigger="click">
                <img slot="reference" style="margin-right:10px" class="down" src="../../../assets/images/more.png"
                     alt="">
                <el-button style="display: block;padding-left: 10px" type="text" :disabled="checkTable.length==0"
                           @click="editByJofDef('part')">修改选中运行状态
                </el-button>
                <el-button style="display: block" type="text" :disabled="tableData.length==0"
                           @click="editByJofDef('all')">修改全部运行状态
                </el-button>
              </el-popover>
              <img class="down" src="../../../assets/images/search.png" @click="changeToggleSearch()"
                   v-if="searchToggle && tabActiveName=='second'" alt="">
              <div v-if="tabActiveName=='second'" style="display: inline-block;display:flex;align:center;"
                   class="select">
                <img class="down" style="margin-right:0px !important" v-if="!searchToggle"
                     src="../../../assets/images/hidden.png" alt="" @click="changeToggleSearch()">
                <el-select v-if="!searchToggle" v-model="qryCloum" slot="prepend" placeholder="请选择"
                           style="width: 100px;">
                  <el-option v-for="(item,i) in queryList" :key="i" :label="item.cloumName"
                             :value="item.cloumValue"></el-option>
                </el-select>
                <el-input placeholder="请输入内容" v-model="qryParam" style="width: 240px;" @change="paramChange"
                          v-if="!searchToggle" clearable>
                </el-input>
                <img class="down" v-if="!searchToggle" slot="append" src="../../../assets/images/search.png" alt=""
                     @click="doQuery">
              </div>
              <el-pagination v-if="tabActiveName=='second'" @size-change="handleSizeChange"
                             @current-change="handleCurrentChange" :current-page="pageNo" :page-size="pageSize"
                             prev-text=" " next-text=" " :page-sizes="[10, 50, 100, 500]" style="margin-left: auto;"
                             layout="prev, pager, next,sizes,total" :total="tableData.length">
              </el-pagination>
            </div>
          </div>
          <el-tab-pane label="图形展示" name="first">
            <div ref="myPage" v-loading="g_loading" class="graph-area" style="width: calc(100% - 10px);height:calc(100vh - 300px);">
              <SeeksRelationGraph v-if="nodeCode" :nodeCode="nodeCode" :nodeType="type" :bizDate="bizDate" appName="job">
              </SeeksRelationGraph>
            </div>
            <div class="node-inf" style="margin-right:100px;">
              <el-card class="box-card" v-if="isShowTaskInf">
                <div slot="header" class="clearfix">
                  <span>任务详情</span>
                  <el-button style="float: right; padding: 3px 0" type="text" @click="closeInf">关闭</el-button>
                </div>
                <el-form ref="form" :model="form" label-width="100px" style="max-height: 350px;overflow-y: auto;">

                  <el-row>
                    <el-form-item label="任务编码">
                      <el-input v-model="taskInf.taskCode" disabled/>
                    </el-form-item>
                  </el-row>
                  <el-row>
                    <el-form-item label="任务名称">
                      <el-input v-model="taskInf.taskName" disabled/>
                    </el-form-item>
                  </el-row>
                  <el-row v-if="null != taskInf.bizDate">
                    <el-form-item label="业务日期">
                      <el-input v-model="taskInf.bizDate" disabled/>
                    </el-form-item>
                  </el-row>
                  <el-row v-if="'default' != taskInf.taskStatus">
                    <el-form-item label="任务状态">
                      <el-select v-model="taskInf.taskStatus" disabled>
                        <el-option v-for="item in this.dict.task_status" :key="item.value" :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-row>
                  <el-divider>
                    <span @click="handleChange">{{ showInfo }}</span>
                  </el-divider>
                  <div v-if="isShow">
                    <el-row>
                      <el-form-item label="执行文件">
                        <el-input v-model="taskInf.shellPath" disabled/>
                      </el-form-item>
                    </el-row>
                    <el-row>
                      <el-form-item label="外部参数">
                        <el-input v-model="taskInf.extParam" disabled/>
                      </el-form-item>
                    </el-row>
                    <el-row>
                      <el-form-item label="资源数">
                        <el-input v-model="taskInf.resNum" disabled/>
                      </el-form-item>
                    </el-row>

                    <el-row>
                      <el-form-item label="优先级">
                        <el-input v-model="taskInf.priorityLevel" disabled/>
                      </el-form-item>
                    </el-row>
                    <el-row v-if="null != taskInf.execStTs">
                      <el-form-item label="执行开始时间">
                        <el-input v-model="taskInf.execStTs" disabled/>
                      </el-form-item>
                    </el-row>
                    <el-row v-if="null != taskInf.execEndTs">
                      <el-form-item label="执行完成时间">
                        <el-input v-model="taskInf.execEndTs" disabled/>
                      </el-form-item>
                    </el-row>
                    <el-row>
                      <el-form-item label="任务备注">
                        <el-input type="textarea" v-model="taskInf.taskRemark" disabled></el-input>
                      </el-form-item>
                    </el-row>
                  </div>
                </el-form>

              </el-card>
              <el-card class="box-card" v-if="isShowJobInf">
                <div slot="header" class="clearfix">
                  <span>作业详情</span>
                  <el-button style="float: right; padding: 3px 0" type="text" @click="closeInf">关闭</el-button>
                </div>
                <el-form ref="form" :model="form" label-width="80px">
                  <el-row>
                    <el-form-item label="作业编码">
                      <el-input v-model="jobInf.jobCode" disabled/>
                    </el-form-item>
                  </el-row>
                  <el-row>
                    <el-form-item label="作业名称">
                      <el-input v-model="jobInf.jobName" disabled/>
                    </el-form-item>
                  </el-row>
                  <el-row v-if="null != jobInf.bizDate">
                    <el-form-item label="业务日期">
                      <el-input v-model="jobInf.bizDate" disabled/>
                    </el-form-item>
                  </el-row>
                  <el-row v-if="null == jobInf.bizDate">
                    <el-form-item label="作业状态">
                      <el-select v-model="jobInf.jobStatus" disabled>
                        <el-option v-for="item in this.dict.job_def_status" :key="item.value" :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-row>
                  <el-row v-if="null != jobInf.bizDate">
                    <el-form-item label="作业状态">
                      <el-select v-model="jobInf.jobStatus" disabled>
                        <el-option v-for="item in this.dict.cycle_job_status" :key="item.value" :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-row>
                  <el-divider>
                    <span @click="jobHandleChange">{{ jobShowInfo }}</span>
                  </el-divider>
                  <div v-if="isJobShow">
                    <el-row>
                      <el-form-item label="优先级">
                        <el-input v-model="jobInf.sortNo" disabled/>
                      </el-form-item>
                    </el-row>
                    <el-row v-if="null == jobInf.bizDate">
                      <el-form-item label="偏移小时">
                        <el-input v-model="jobInf.offsetHour" disabled/>
                      </el-form-item>
                    </el-row>
                    <el-row>
                      <el-form-item label="节点名称">
                        <el-input v-model="jobInf.appointAgentCode" disabled/>
                      </el-form-item>
                    </el-row>
                    <el-row v-if="null == jobInf.bizDate">
                      <el-form-item label="作业描述">
                        <el-input type="textarea" v-model="jobInf.jobDesc" disabled/>
                      </el-form-item>
                    </el-row>
                    <el-row v-if="null != jobInf.bizDate">
                      <el-form-item label="开始时间">
                        <el-input v-model="jobInf.jobStTs" disabled/>
                      </el-form-item>
                    </el-row>
                    <el-row v-if="null != jobInf.bizDate">
                      <el-form-item label="结束时间">
                        <el-input v-model="jobInf.jobEndTs" disabled/>
                      </el-form-item>
                    </el-row>
                  </div>
                </el-form>
              </el-card>
            </div>
          </el-tab-pane>
          <el-tab-pane label="列表展示" name="second">
            <el-table :data="AfterChangeData" v-loading="loading" border @select="select" @select-all="selectAll"
                      max-height="600" style="width: 100%;margin-top: 15px">
              <el-table-column type="selection" width="55"/>
              <el-table-column v-if="router!='/appJobDef/index'" prop="bizDate" label="业务日期">
              </el-table-column>
              <el-table-column prop="taskCode" label="任务编码">
              </el-table-column>
              <el-table-column prop="taskName" label="任务名称">
              </el-table-column>
              <el-table-column prop="jobCode" label="作业编码">
              </el-table-column>
              <el-table-column v-if="router!='/appJobDef/index'" prop="taskStatus" label="运行状态" min-width="80" column-key="taskStatus">
                <template slot-scope="scope">
                  <el-tag size="medium" v-if="scope.row.taskStatus === '未生成实例'" type="info">{{ scope.row.taskStatus }}</el-tag>
                  <el-tag size="medium" v-if="scope.row.taskStatus === '待执行'">{{ scope.row.taskStatus }}</el-tag>
                  <el-tag size="medium" v-if="scope.row.taskStatus === '执行中'" effect="dark">{{ scope.row.taskStatus }}</el-tag>
                  <el-tag size="medium" v-if="scope.row.taskStatus === '暂停'" type="warning">{{ scope.row.taskStatus }}</el-tag>
                  <el-tag size="medium" v-if="scope.row.taskStatus === '执行成功'" effect="dark" type="success">{{ scope.row.taskStatus }}</el-tag>
                  <el-tag size="medium" v-if="scope.row.taskStatus === '执行失败'" type="danger">{{ scope.row.taskStatus }}</el-tag>
                  <el-tag size="medium" v-if="scope.row.taskStatus === '置虚'" type="success">{{ scope.row.taskStatus }}</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <!--    修改-->
    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="dialogVisible" title="修改运行状态" width="480px">
      <el-form ref="form" :inline="true" :model="form" size="small" label-width="160px">
        <el-row>
          <el-form-item label="运行状态">
            <el-select v-model="form.taskStatus" placeholder="请选择">
              <el-option v-for="(item,i) in editTaskStatusOptions" :key="i" :label="item.label" :value="item.value"
                         :disabled="item.disabled">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button icon="el-icon-document-delete" @click="dialogVisible = false">取消</el-button>
        <el-button icon="el-icon-document-add" v-loading="statusLoading" type="primary" @click="submitCU">保存
        </el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import SeeksRelationGraph from "@/components/DependGraph/index.vue";
import jobDef from "@/api/cycleJob/job_def";
import periodTaskDefApi from '@/api/cycleJob/taskDef'
import periodTaskApi from "@/api/cycleJob/task";

export default {
  props: {
    jobCode: String,
    bizDate: String,
    type: String,
    taskCode: String,
    paramsTaskName: String
  },
  name: "SeeksRelationGraphDemo",
  dicts: ["job_def_status", "cycle_job_status", "task_status"],
  components: {
    SeeksRelationGraph,
  },
  data() {
    return {
      statusLoading: false,
      taskParamList: [],
      qryParam: "",
      qryCloum: "",
      searchToggle: true,
      queryList: [
        {cloumName: "任务编码", cloumValue: "taskCode"},
        {cloumName: "任务名称", cloumValue: "taskName"},
      ],
      pageNo: 1, //当前页
      pageSize: 10, //每页显示条目数
      loading: false,
      form: {
        taskStatus: "",
      },
      dialogVisible: false,
      taskStatusDict: [],
      taskDict: [],
      editTaskStatusOptions: [],
      tableData: [],
      copyTableData: [],
      checkTable: [],
      dataForm: {},
      isChangeTack: true,
      taskDefList: [],
      nodeCode: '',
      activeClass: -1,
      isShowTaskInf: false,
      isShowJobInf: false,
      //isShowNodeMenuPanel: false,
      taskInf: {},
      jobInf: {},
      nodeMenuPanelPosition: {
        x: 0,
        y: 0,
      },
      checked_select: "",
      graph_json_data: {},
      g_loading: false,
      demoname: "---",
      activeTabName: "case1",
      graphOptions: {
        debug: true,
        backgrounImage: "http://ai-mark.cn/images/ai-mark-desc.png",
        backgrounImageNoRepeat: true,
        layouts: [
          {
            label: "树",
            layoutName: "tree",
            layoutClassName: "seeks-layout-center",
            defaultNodeShape: 0,
            defaultLineShape: 1,
            from: "left",
            // 通过这4个属性来调整 tree-层级距离&节点距离
            min_per_width: "100",
            max_per_width: "300",
            min_per_height: "40",
            max_per_height: "100",
            levelDistance: "", // 如果此选项有值，则优先级高于上面那4个选项
          },
        ],
        defaultLineMarker: {
          markerWidth: 12,
          markerHeight: 12,
          refX: 6,
          refY: 6,
          data: "M2,2 L10,6 L2,10 L6,6 L2,2",
        },
        defaultExpandHolderPosition: "right",
        defaultNodeShape: 1,
        // 'defaultNodeWidth': '300',
        defaultLineShape: 4,
        defaultJunctionPoint: "lr",
        defaultNodeBorderWidth: 0,
        defaultLineColor: "rgba(0, 186, 189, 1)",
        defaultNodeColor: "rgba(0, 206, 209, 1)",
      },
      activeName: "1",
      tabActiveName: "first",
      scrollHeight: "0px",
      isShow: false,
      showInfo: "展开",
      jobShowInfo: "展开",
      router: "",
      excelData: [],
      taskName: "",
      // 功能区高度
      areaHeight: "0px",
    };
  },
  created() {
    this.taskDict = this.dict.task_status;
  },
  mounted() {
    //console.log("类型是用来干嘛的", this.type, this.bizDate)
    this.router = this.$route.path;
    if (this.router != "/appTask/index") {
      this.initTaskList();
    } else {
      this.dataForm.bizDate = this.bizDate;
      this.dataForm.taskCode = this.taskCode;
      this.isChangeTack = false;
    }
    this.scrollHeight = window.innerHeight * 0.5 + "px";
  },
  watch: {
    taskDict() {
      this.$nextTick(() => {
        this.taskDict.forEach((item) => {
          var obj = {
            text: item.label,
            value: item.value,
          };
          this.taskStatusDict.push(obj);
          var option = {
            value: item.value,
            label: item.label,
          };
          if (item.value == "2" || item.value == "4" || item.value == "5") {
            option.disabled = true;
          }
          this.editTaskStatusOptions.push(option);
        });
      });
    },
  },
  computed: {
    AfterChangeData() {
      let start = (this.pageNo - 1) * this.pageSize;
      let end = this.pageNo * this.pageSize;
      this.loading = false;
      return this.tableData.slice(start, end);
    },
  },
  methods: {
    changeToggleSearch() {
      this.searchToggle = !this.searchToggle;
    },
    doQuery() {
      let list = []
      if (this.qryCloum == "") {
        this.$message({
          message: "请先选择搜索项",
          type: "warning",
        });
        return
      }
      this.loading = true
      if (this.qryParam == '') {
        this.tableData = this.copyTableData
        this.pageNo = 1
      }
      if (this.qryCloum == 'taskCode') {
        this.copyTableData.forEach(item => {
          if (item.taskCode.indexOf(this.qryParam) !== -1) {
            list.push(item)
          }
        })
      } else {
        this.copyTableData.forEach(item => {
          if (item.taskName.indexOf(this.qryParam) !== -1) {
            list.push(item)
          }
        })
      }
      this.tableData = list
      if (this.pageNo > this.tableData.length) {
        this.pageNo = 1
      }
      this.loading = false
    },
    paramChange() {
    },
    //分页大小改变
    handleSizeChange(val) {
      this.loading = true;
      this.pageSize = val;
    },
    //当前页数改变
    handleCurrentChange(val) {
      this.loading = true;
      this.pageNo = val;
    },
    submitCU() {
      this.statusLoading = true
      let formData = {
        periodTaskList: this.taskParamList,
        taskStatus: this.form.taskStatus,
      };
      periodTaskApi.batchChangeStatus(formData).then((res) => {
        this.statusLoading = false
        let msg =
          "更新【" +
          res.upCount +
          "】个任务,成功【" +
          res.successCount +
          "】个！";
        this.$notify({
          message: msg,
          type: "success",
        });
        this.dialogVisible = false;
        this.dataOrList();
      })
    },
    select(selection) {
      this.checkTable = selection;
    },
    selectAll(selection) {
      this.checkTable = selection;
    },
    editByJofDef(info) {
      this.taskParamList = []
      this.dialogVisible = true;
      if (info == 'part') {
        this.taskParamList = JSON.parse(JSON.stringify(this.checkTable))
      } else {
        this.taskParamList = JSON.parse(JSON.stringify(this.tableData))
      }
    },
    searchList(data) {
      this.loading = true;
      this.tableData = []
      this.copyTableData = []
      if (data.type === 'up') {
        this.getUpDependTaskList(data.taskCode)
      } else {
        this.getDownDependTaskList(data.taskCode)
      }
    },
    getUpDependTaskList(taskCode) {
      periodTaskDefApi.upDependList(taskCode).then((res) => {
        this.loading = false;
        this.tableData = res.periodTaskDefList;
        this.copyTableData = JSON.parse(JSON.stringify(res.periodTaskDefList))
      })
    },
    getDownDependTaskList(taskCode) {
      periodTaskDefApi.downDependList(taskCode).then((res) => {
        this.loading = false;
        this.tableData = res.periodTaskDefList;
        this.copyTableData = JSON.parse(JSON.stringify(res.periodTaskDefList))
      })
    },
    // 格式转换，直接复制即可
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    // 数据写入excel
    export2Excel(tableList) {
      var that = this;
      require.ensure([], () => {
        const {export_json_to_excel} = require("@/excel/export2Excel"); // 这里必须使用绝对路径，使用@/+存放export2Excel的路径
        const tHeader = ["任务编码", "任务名称", "作业编码"]; // 导出的表头名信息
        const filterVal = ["taskCode", "taskName", "jobCode"]; // 导出的表头字段名，需要导出表格字段名
        if (this.router != '/appJobDef/index') {
          filterVal.push("status")
          tHeader.push("运行状态")
        }
        const list = tableList;
        const data = that.formatJson(filterVal, list);
        let taskName
        if (this.$route.path == '/appTask/index') {
          taskName = this.paramsTaskName
        } else {
          taskName = that.taskName
        }
        let name =
          taskName +
          (that.dataForm.type == "up" ? "上游依赖" : "下游依赖");
        export_json_to_excel(tHeader, data, name); // 导出的表格名称，根据需要自己命名
      });
    },
    // 列表下载
    doExportByJofDef() {
      if (this.checkTable.length > 0) {
        this.$confirm("确定导出选中的列表文件?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.export2Excel(this.checkTable);
        });
      } else if (this.tableData.length > 0) {
        this.$confirm("确定导出全部依赖列表数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.export2Excel(this.tableData);
        });
      } else {
        this.$notify({
          message: "暂无数据可导出",
          type: "warning",
        });
      }
    },
    dataOrList() {
      if (this.router === '/job/task' || this.router === '/appTask/index') {
        if (this.tabActiveName == "first") {
          this.setJobAndTaskGraphData(this.dataForm);
        } else {
          this.setPeriodTaskDependList(this.dataForm)
        }
      } else {
        if (this.tabActiveName == "first") {
          this.setGraphData(this.dataForm);
        } else {
          this.searchList(this.dataForm);
        }
      }
    },
    setPeriodTaskDependList(dataForm) {
      if (dataForm.type === 'up') {
         this.setPeriodTaskUpDependList(dataForm)
      } else {
         this.setPeriodTaskDownDependList(dataForm)
      }
    },
    setPeriodTaskUpDependList(dataForm){
      this.loading = true;
      periodTaskApi.upDependList(dataForm.taskCode, dataForm.bizDate).then((res) => {
        this.loading = false;
        res.dependPeriodTaskDtoList.forEach(item =>{
          item.bizDate = this.dataForm.bizDate
        })
        this.tableData = res.dependPeriodTaskDtoList;
        this.copyTableData = JSON.parse(JSON.stringify(res.dependPeriodTaskDtoList))
      })
    },
    setPeriodTaskDownDependList(dataForm){
      this.loading = true;
      periodTaskApi.downDependList(dataForm.taskCode, dataForm.bizDate).then((res) => {
        this.loading = false;
        res.dependPeriodTaskDtoList.forEach(item =>{
          item.bizDate = this.dataForm.bizDate
        })
        this.tableData = res.dependPeriodTaskDtoList;
        this.copyTableData = JSON.parse(JSON.stringify(res.dependPeriodTaskDtoList))
      })
    },
    handleClick() {
      this.qryParam = ''
      this.qryCloum = ''
      if(this.tabActiveName === "first"){
        this.areaHeight = "0px";
      }else {
        this.areaHeight = "40px";
      }
      if (this.dataForm.type) {
        this.dataOrList();
      }
    },
    relyon(val) {
      this.qryParam = ''
      this.qryCloum = ''
      this.checkTable = [];
      if (val == "单层上游依赖") {
        this.dataForm.showType = "ONE_DEPEND"
        this.dataForm.type = "up"
      } else if (val == "所有上游依赖") {
        this.dataForm.showType = "ALL_DEPEND"
        this.dataForm.type = "up"
      } else if (val == "单层下游依赖") {
        this.dataForm.showType = "ONE_DEPEND"
        this.dataForm.type = "down"
      } else {
        this.dataForm.showType = "ALL_DEPEND"
        this.dataForm.type = "down"
      }
      this.dataOrList();
    },
    selectTask(param) {
      console.log("aa");
      this.isChangeTack = false;
      this.nodeCode = param.taskCode
      this.taskName = param.taskName;
      this.dataForm.taskCode = param.taskCode;
      if (this.bizDate) {
        this.dataForm.bizDate = this.bizDate;
      }
      if (this.dataForm.type) {
        this.dataOrList();
      }
    },
    getItem(index) {
      this.activeClass = index;
    },
    initTaskList() {
      if (this.jobCode != "") {
        jobDef.queryTaskList(this.jobCode).then((res) => {
          this.taskDefList = res;
        });
      }
    },
    handleChange() {
      this.isShow = !this.isShow;
      if (this.isShow == true) {
        this.showInfo = "折叠";
      } else {
        this.showInfo = "展开";
      }
    },
    jobHandleChange() {
      this.isJobShow = !this.isJobShow;
      if (this.isJobShow == true) {
        this.jobShowInfo = "折叠";
      } else {
        this.jobShowInfo = "展开";
      }
    },
    setGraphData(dataForm) {
      this.g_loading = true;
      if (dataForm.type === 'up') {
        this.setUpDependChat(dataForm.taskCode, dataForm.showType)
      } else {
        this.setDownDependChat(dataForm.taskCode, dataForm.showType)
      }

    },
    setUpDependChat(taskCode, showType) {
      periodTaskDefApi.upDependChat(taskCode, showType).then((res) => {
        this.g_loading = false
        this.$refs.seeksRelationGraph.setJsonData(res, (seeksRGGraph) => {
          seeksRGGraph.refresh()
        })
      })
    },
    setDownDependChat(taskCode, showType) {
      periodTaskDefApi.downDependChat(taskCode, showType).then((res) => {
        this.g_loading = false
        this.$refs.seeksRelationGraph.setJsonData(res, (seeksRGGraph) => {
          seeksRGGraph.refresh()
        });
      })
    },
    setJobAndTaskGraphData(dataForm) {
      if (dataForm.type === 'up') {
        this.setUpDependPeriodTaskChat(dataForm)
      } else {
        this.setDownDependPeriodTaskChat(dataForm)
      }

    },
    setUpDependPeriodTaskChat(dataForm) {
      this.g_loading = true
      periodTaskApi.upDependChat(dataForm.taskCode, dataForm.bizDate, dataForm.showType).then((res) => {
        this.g_loading = false
        this.$refs.seeksRelationGraph.setJsonData(res, (seeksRGGraph) => {
          seeksRGGraph.refresh()
        });
      })
    },
    setDownDependPeriodTaskChat(dataForm) {
      this.g_loading = true
      periodTaskApi.downDependChat(dataForm.taskCode, dataForm.bizDate, dataForm.showType).then((res) => {
        this.g_loading = false
        this.$refs.seeksRelationGraph.setJsonData(res, (seeksRGGraph) => {
          seeksRGGraph.refresh()
        });
      })
    },
    doFilter() {
      var _all_nodes = this.$refs.seeksRelationGraph.getNodes();
      var _all_lines = this.$refs.seeksRelationGraph.getLines();
      _all_nodes.forEach((thisNode) => {
        var _isHideThisLine = false;
        if (this.checked_select !== "") {
          if (
            this.checked_select == "隐藏互斥" &&
            thisNode.data["isExclusion"]
          ) {
            _isHideThisLine = true;
          }
          if (
            this.checked_select == "隐藏作业外依赖" &&
            !thisNode.data["isMainTask"]
          ) {
            _isHideThisLine = true;
          }
        }
        thisNode.opacity = _isHideThisLine ? 0.1 : 1;
      });
      _all_lines.forEach((thisLine) => {
        // 注意这里的line和json数据中link不一样，一条线（line）上可以附着多条关系(link),可以通过line.relations获取到这条线上所有的关系数据(link)
        var _isHideThisLine = true;
        thisLine.relations.forEach((thisLink) => {
          if (
            this.checked_select == "隐藏互斥" &&
            thisLink.data["isExclusion"]
          ) {
            thisLink.isHide = true;
          } else if (
            this.checked_select == "隐藏作业外依赖" &&
            !thisLink.data["isMainTask"]
          ) {
            thisLink.isHide = true;
          } else {
            _isHideThisLine = false;
            thisLink.isHide = false;
          }
        });
      });
    },
    onNodeClick(nodeObject, $event) {
    },
    showNodeInf() {
      if ("period/task" == this.currentNode.data.type) {
        this.taskInf = this.currentNode.data.entity;
        this.isShowJobInf = false;
        this.isShowTaskInf = true;
      }
      if ("job" == this.currentNode.data.type) {
        this.jobInf = this.currentNode.data.entity;
        this.isShowTaskInf = false;
        this.isShowJobInf = true;
      }
    },
    closeInf() {
      this.isShowJobInf = false;
      this.isShowTaskInf = false;
    },
    // showNodeMenus(nodeObject, $event) {
    //   this.currentNode = nodeObject;
    //   var _base_position = this.$refs.myPage.getBoundingClientRect();
    //   this.isShowNodeMenuPanel = true;
    //   this.nodeMenuPanelPosition.x = $event.clientX - _base_position.x;
    //   this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y;
    // },
    onNodeExpand(node, e) {
      // 当有一些节点被显示或隐藏起来时，会让图谱看着很难看，需要布局器重新为节点分配位置，所以这里需要调用refresh方法来重新布局
      this.$refs.seeksRelationGraph.refresh();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.border {
  padding-left: 10px;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
  border: 1px solid #dcdfe6;
}

.func_area {
  height:40px;
  padding-top:6px;
  padding-left: 30px;
  padding-right:30px;
  color: #555555;
  font-size: 12px;
}

.graph-area {
  position: relative !important;
}

.node-inf {
  position: absolute;
  top: 0px;
  width: 460px;
  right: 0px;
  z-index: 999;
}

.el-scrollbar {
  height: 90%;
}

.scrollbar-wrap {
  overflow-x: hidden;
}

.active {
  background-color: #0077b1;
}

.taskUl li {
  color: white;
}

::v-deep .c-expand-positon-right {
  z-index: -1 !important;
}

.down {
  cursor: pointer;
  vertical-align: middle;
  height: 28px;
  width: 28px;
}

::v-deep .el-input--small .el-input__inner {
  height: 28px !important;
  line-height: 28px !important;
}
</style>
